<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="icon" href="./image/favicon.ico">
    <script src="./js/flexible.min.js"></script>
    <title>Evo Surfers</title>
</head>

<body>
    <div id="loading" class="loading">
        <div class="loadEffect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="loadingName">Loading</div>
        <div class="loadingName" id="loadingNum">0%</div>
    </div>
    <div id="homePage">
        <div class="yuzhou position-re">
            <img src="./image/universe/loading.gif" data-src="./image/universe/yuzhou_bg.png" alt="" class="lazy bg">
            <div class="yuzhou-line"></div>
            <div class="top">
                <img src="./image/universe/loading.gif" data-src="./image/universe/top_bg.png" alt=""
                    class="lazy top_bg">
                <img src="./image/universe/loading.gif" data-src="./image/universe/play.png" alt="" class="lazy play"
                    onclick="clickPlay()">
                <img src="./image/universe/loading.gif" data-src="./image/universe/logo.png" alt=""
                    class="lazy top_logo">
                <ul class="tab">
                    <li class="active" data-index="0">Home</li>
                    <li data-index="1">Game</li>
                    <li data-index="2">EVO</li>
                    <li data-index="3">Wiki</li>
                    <li data-index="4">
                        <span>Whitepaper</span>
                        <!-- <img src="./image/universe/loading.gif" data-src="./image/universe/download.png" alt=""
                            class="lazy download">
                        <div class="list">
                            <p>News</p>
                            <p>Getting Started</p>
                            <p>Encyclopedia</p>
                            <p>Land Chest Sale</p>
                        </div> -->
                    </li>
                </ul>

            </div>
            <div class="phoneTop" id="phone_top">
                <img src="./image/universe/loading.gif" data-src="./image/universe/phone_top_bg.png" alt=""
                    class="lazy top_bg" id="phone_top_bg">
                <img src="./image/universe/loading.gif" data-src="./image/universe/download.png" alt=""
                    class="lazy phone_download" onclick="clickPhoneDown()" id="phone_download">
                <img src="./image/universe/loading.gif" data-src="./image/universe/logo.png" alt=""
                    class="lazy top_logo">
                <ul class="phone_tab" id="phone_tab">
                    <li data-index="0">Home</li>
                    <li data-index="1">Game</li>
                    <li data-index="2">EVO</li>
                    <li data-index="3">Wiki</li>
                    <li data-index="4">Whitepaper</li>
                    <!-- <li data-index="4">
                        <div class="secondDown" onclick="clickPhoneSecondDown()">
                            <p>More</p>
                            <img src="./image/universe/loading.gif" data-src="./image/universe/download.png" alt=""
                                class="lazy phone_second_download" id="phone_second_download">
                        </div>
                        <div class="phone_top_list" id="phone_top_list">
                            <p>News</p>
                            <p>Getting Started</p>
                            <p>Encyclopedia</p>
                            <p>Land Chest Sale</p>
                        </div>
                    </li> -->
                    <li>
                        <img src="./image/universe/loading.gif" data-src="./image/universe/play.png" alt=""
                            class="lazy phone_play" onclick="clickPlay()">
                    </li>
                </ul>
            </div>
            <img src="./image/universe/loading.gif" data-src="./image/universe/stars1.png" alt=""
                class="lazy stars stars1">
            <img src="./image/universe/loading.gif" data-src="./image/universe/stars2.png" alt=""
                class="lazy stars stars2">
            <img src="./image/universe/loading.gif" data-src="./image/universe/stars3.png" alt=""
                class="lazy stars stars3">
            <img src="./image/universe/loading.gif" data-src="./image/universe/stars4.png" alt=""
                class="lazy stars stars4">
            <img src="./image/universe/loading.gif" data-src="./image/universe/stars5.png" alt=""
                class="lazy stars stars5">
            <img src="./image/universe/loading.gif" data-src="./image/universe/door_behind.png" alt=""
                class="lazy door_behind">
            <img src="./image/universe/loading.gif" data-src="./image/universe/door.png" alt="" class="lazy door">
            <img src="./image/universe/loading.gif" data-src="./image/universe/door_halo.png" alt=""
                class="lazy door_halo">
            <img src="./image/universe/loading.gif" data-src="./image/universe/door_core.png" alt=""
                class="lazy door_core">
            <img src="./image/universe/loading.gif" data-src="./image/universe/door_front.png" alt=""
                class="lazy door_front">
            <img src="./image/universe/loading.gif" data-src="./image/universe/aerocraft1.png" alt=""
                class="lazy aerocraft1">
            <img src="./image/universe/loading.gif" data-src="./image/universe/aerocraft2.png" alt=""
                class="lazy aerocraft2">
            <img src="./image/universe/loading.gif" data-src="./image/universe/aerocraft3.png" alt=""
                class="lazy aerocraft3">
            <img src="./image/universe/loading.gif" data-src="./image/universe/alien1.png" alt="" class="lazy alien1">
            <img src="./image/universe/loading.gif" data-src="./image/universe/alien2.png" alt="" class="lazy alien2">
            <img src="./image/universe/loading.gif" data-src="./image/universe/migration.png" alt=""
                class="lazy migration1">
            <img src="./image/universe/loading.gif" data-src="./image/universe/migration.png" alt=""
                class="lazy migration2">
            <img src="./image/universe/loading.gif" data-src="./image/universe/star1.png" alt="" class="lazy star1">
            <img src="./image/universe/loading.gif" data-src="./image/universe/star2.png" alt="" class="lazy star2">
            <img src="./image/universe/loading.gif" data-src="./image/universe/star3.png" alt="" class="lazy star3">
            <!-- <div class="time">
                <span id="hours">00</span>
                <i>:</i>
                <span id="minutes">00</span>
                <i>:</i>
                <span id="seconds">00</span>
            </div> -->
            <div class="title_introduce">
                <img src="./image/universe/loading.gif" data-src="./image/universe/introduce.png" alt="">
            </div>
        </div>
        <div class="keji position-re">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/keji_bg.png" alt=""
                class="lazy bg ">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/space_station.png" alt=""
                class="lazy space_station">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/star.png" alt=""
                class="lazy star">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket1.png" alt=""
                class="lazy rocket1">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket2.png" alt=""
                class="lazy rocket2">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket3.png" alt=""
                class="lazy rocket3">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket4.png" alt=""
                class="lazy rocket4">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket5.png" alt=""
                class="lazy rocket5">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket6.png" alt=""
                class="lazy rocket6">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket7.png" alt=""
                class="lazy rocket7">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket8.png" alt=""
                class="lazy rocket8">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket9.png" alt=""
                class="lazy rocket9">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket10.png" alt=""
                class="lazy rocket10">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/rocket11.png" alt=""
                class="lazy rocket11">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling1">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling2">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling3">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling4">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling5">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling6">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling7">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling8">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling9">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling10">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/twinkling.png" alt=""
                class="lazy twinkling twinkling11">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/architecture.png" alt=""
                class="lazy architecture">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/architecture_core.png" alt=""
                class="lazy architecture_core">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/shelter_up.png" alt=""
                class="lazy shelter_up">

            <div class="introduce">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/introduce_bg.png" alt=""
                    class="lazy introduce_bg">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/cylinder_light.png" alt=""
                    class="lazy cylinder_light">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/transverse_light.png" alt=""
                    class="lazy transverse_light">
                <div class="goods first_goods">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/golden_light.png" alt=""
                        class="lazy backlight">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/angel_egg.png" alt=""
                        class="lazy angel_egg">
                    <p>10 MATIC</p>
                    <span>Genesis Eggs</span>
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/bug_btn.png" alt=""
                        class="lazy buy_btn" onclick="goToPresale()">
                    <p class="btn_text" onclick="goToPresale()">Details</p>
                </div>
                <div class="goods second_goods">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/blu_ray.png" alt=""
                        class="lazy backlight">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/technology_egg.png"
                        alt="" class="lazy technology_egg">
                    <p>30 MATIC</p>
                    <span>Patented Eggs</span>
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/bug_btn.png" alt=""
                        class="lazy buy_btn" onclick="goToPresale()">
                    <p class="btn_text" onclick="goToPresale()">Details</p>
                </div>
                <div class="goods third_goods">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/purple_light.png" alt=""
                        class="lazy backlight">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/suit_egg.png" alt=""
                        class="lazy suit_egg">
                    <p>15 MATIC</p>
                    <span>Fashion Eggs</span>
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/bug_btn.png" alt=""
                        class="lazy buy_btn" onclick="goToPresale()">
                    <p class="btn_text" onclick="goToPresale()">Details</p>
                </div>
                <p class="text_introduce">Evo Surfers is a fantasy-based metaverse world themed around the evolution of
                    civilizations. Players participate in the progress, technological innovation, and gradual
                    development into a cosmic race. Evo Surfers EVO token allows players to create, own, and monetize
                    their gaming experience with the Polygon blockchain.</p>
            </div>

            <div class="phone_introduce">
                <div class="introduceItem">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/golden_light.png" alt=""
                        class="lazy phone_backlight">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/angel_egg.png" alt=""
                        class="lazy phone_angel_egg">
                    <span class="phone_egg_money">10 MATIC</span>
                    <span>Genesis Eggs</span>
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/bug_btn.png" alt=""
                        class="lazy phone_buy_btn" onclick="goToPresale()">
                    <p class="phone_btn_text" onclick="goToPresale()">Details</p>
                </div>
                <div class="introduceItem">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/blu_ray.png" alt=""
                        class="lazy phone_backlight">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/technology_egg.png"
                        alt="" class="lazy phone_angel_egg">
                    <span class="phone_egg_money">30 MATIC</span>
                    <span>Patented Eggs</span>
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/bug_btn.png" alt=""
                        class="lazy phone_buy_btn" onclick="goToPresale()">
                    <p class="phone_btn_text" onclick="goToPresale()">Details</p>
                </div>
                <div class="introduceItem">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/purple_light.png" alt=""
                        class="lazy phone_backlight">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/suit_egg.png" alt=""
                        class="lazy phone_angel_egg">
                    <span class="phone_egg_money">15 MATIC</span>
                    <span>Fashion Eggs</span>
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/bug_btn.png" alt=""
                        class="lazy phone_buy_btn" onclick="goToPresale()">
                    <p class="phone_btn_text" onclick="goToPresale()">Details</p>
                </div>
                <div class="phone_text_introduce">
                    <p>
                        Evo Surfers is a fantasy-based metaverse world themed around the evolution of civilizations.
                        Players participate in the progress, technological innovation, and gradual development into a
                        cosmic race. Evo Surfers EVO token allows players to create, own, and monetize their gaming
                        experience with the Polygon blockchain.
                    </p>
                </div>
            </div>

            <div class="platform">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/platform_bg.png" alt=""
                    class="lazy platform_bg">
                <!-- <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/skeleton1.png" alt="" class="lazy platform_skeleton1"> -->
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/skeleton2.png" alt=""
                    class="lazy platform_skeleton2">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/skeleton_light.png" alt=""
                    class="lazy skeleton_light">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/Attribute.png" alt=""
                    class="lazy Attribute">
                <!-- <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/hexagon1.png" alt="" class="lazy hexagon1"> -->
                <!-- <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/hexagon2.png" alt="" class="lazy hexagon2"> -->
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/hexagon3.png" alt=""
                    class="lazy hexagon3">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/hexagon.png" alt=""
                    class="lazy hexagon_bg">
            </div>

            <div class="phone_platform">
                <div class="platform_bg_group platform_bg">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/platform_bg_2.png"
                        alt="" class="lazy platform_bg_2">
                    <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/platform_bg_1.png"
                        alt="" class="lazy platform_bg_1">
                </div>
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/skeleton2.png" alt=""
                    class="lazy platform_skeleton2">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/skeleton_light.png" alt=""
                    class="lazy skeleton_light">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/Attribute.png" alt=""
                    class="lazy Attribute">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/hexagon3.png" alt=""
                    class="lazy hexagon3">
                <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/hexagon.png" alt=""
                    class="lazy hexagon_bg">
            </div>
        </div>

        <div class="gongye position-re">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/shelter_down.png" alt=""
                class="lazy shelter_down">
            <img src="./image/universe/loading.gif" data-src="./image/scienceTechnology/industry_phone_bg.png" alt=""
                class="lazy industry_phone_bg" id="industry_phone_bg">
            <img src="./image/universe/loading.gif" data-src="./image/industry/industry_bg.png" alt="" class="lazy bg">
            <img src="./image/universe/loading.gif" data-src="./image/industry/industry_bg_1.png" alt=""
                class="lazy bg_before">
            <img src="./image/universe/loading.gif" data-src="./image/industry/industry_fire1.png" alt=""
                class="lazy industry_fire industry_fire1">
            <img src="./image/universe/loading.gif" data-src="./image/industry/industry_fire2.png" alt=""
                class="lazy industry_fire industry_fire2">
            <img src="./image/universe/loading.gif" data-src="./image/industry/industry_fire3.png" alt=""
                class="lazy industry_fire industry_fire3">
            <img src="./image/universe/loading.gif" data-src="./image/industry/spark1.png" alt="" class="lazy spark1">
            <img src="./image/universe/loading.gif" data-src="./image/industry/spark2.png" alt="" class="lazy spark2">
            <img src="./image/universe/loading.gif" data-src="./image/industry/spark3.png" alt="" class="lazy spark3">
            <img src="./image/universe/loading.gif" data-src="./image/industry/worker1.png" alt="" class="lazy worker1">
            <img src="./image/universe/loading.gif" data-src="./image/industry/worker2.png" alt="" class="lazy worker2">
            <img src="./image/universe/loading.gif" data-src="./image/industry/worker3.png" alt="" class="lazy worker3">
            <img src="./image/universe/loading.gif" data-src="./image/industry/worker4.png" alt="" class="lazy worker4">
            <img src="./image/universe/loading.gif" data-src="./image/industry/airship1.png" alt=""
                class="lazy airship1">
            <img src="./image/universe/loading.gif" data-src="./image/industry/airship2.png" alt=""
                class="lazy airship2">
            <img src="./image/universe/loading.gif" data-src="./image/industry/airship3.png" alt=""
                class="lazy airship3">
            <img src="./image/universe/loading.gif" data-src="./image/industry/industry_up.png" alt=""
                class="lazy industry_up">
            <img src="./image/universe/loading.gif" data-src="./image/industry/industry_down.png" alt=""
                class="lazy industry_down">
            <div class="floor">
                <div class="position-re list1">
                    <ul class="floor_list floor_list1">
                        <li>2022 Q1</li>
                        <li>Alpha Test</li>
                        <li>NFT CaCha</li>
                        <li>Adventure</li>
                        <li>Jobs</li>
                        <li>Patents</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up_line.png" alt=""
                        class="lazy panel_up_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down_line.png" alt=""
                        class="lazy panel_down_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_down">
                </div>
                <div class="position-re list2">
                    <ul class="floor_list floor_list2">
                        <li>2022 Q2</li>
                        <li>Beta Testing</li>
                        <li>Combat</li>
                        <li>Mission</li>
                        <li>Leaderboard</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up_line.png" alt=""
                        class="lazy panel_up_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down_line.png" alt=""
                        class="lazy panel_down_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_down">
                </div>
                <div class="position-re list3">
                    <ul class="floor_list floor_list3">
                        <li>2022 Q3</li>
                        <li>Skills</li>
                        <li>Explore</li>
                        <li>Architecture</li>
                        <li>Teaming</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up_line.png" alt=""
                        class="lazy panel_up_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down_line.png" alt=""
                        class="lazy panel_down_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_down">
                </div>
                <div class="position-re list4">
                    <ul class="floor_list floor_list4">
                        <li>2022 Q4</li>
                        <li>Equipment</li>
                        <li>Guild</li>
                        <li>Battle Royale</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                </div>
            </div>
            <div class="phone_floor">
                <div class="position-re list1">
                    <ul class="floor_list floor_list1">
                        <li>2022 Q1</li>
                        <li>Alpha Test</li>
                        <li>NFT CaCha</li>
                        <li>Adventure</li>
                        <li>Jobs</li>
                        <li>Patents</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up_line.png" alt=""
                        class="lazy panel_up_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down_line.png" alt=""
                        class="lazy panel_down_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_up_90">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_down_90">
                </div>
                <div class="position-re list2">
                    <ul class="floor_list floor_list2">
                        <li>2022 Q2</li>
                        <li>Beta Testing</li>
                        <li>Combat</li>
                        <li>Mission</li>
                        <li>Leaderboard</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up_line.png" alt=""
                        class="lazy panel_up_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down_line.png" alt=""
                        class="lazy panel_down_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_up_90">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_down_90">
                </div>
                <div class="position-re list3">
                    <ul class="floor_list floor_list3">
                        <li>2022 Q3</li>
                        <li>Skills</li>
                        <li>Explore</li>
                        <li>Architecture</li>
                        <li>Teaming</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up_line.png" alt=""
                        class="lazy panel_up_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down_line.png" alt=""
                        class="lazy panel_down_line">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_up_90">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/spark.png" alt=""
                        class="lazy spark spark_down_90">
                </div>
                <div class="position-re list4">
                    <ul class="floor_list floor_list4">
                        <li>2022 Q4</li>
                        <li>Equipment</li>
                        <li>Guild</li>
                        <li>Battle Royale</li>
                    </ul>
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_up.png" alt=""
                        class="lazy panel_up">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_down.png" alt=""
                        class="lazy panel_down">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/panel_effects.png" alt=""
                        class="lazy panel_effects">
                </div>


                <!-- <div class="phone_floor_left">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/phone_floor_left.png" alt=""
                        class="lazy phone_floor_left_img">
                </div>
                <div class="phone_floor_right">
                    <img src="./image/universe/loading.gif" data-src="./image/industry/phone_floor_right.png" alt=""
                        class="lazy phone_floor_right_img">
                </div> -->
            </div>
        </div>

        <div class="nongye position-re">
            <img src="./image/universe/loading.gif" data-src="./image/agriculture/agriculture_bg.jpg" alt=""
                class="lazy bg">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/smoke1.png" alt=""
                class="lazy smoke1">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/smoke2.png" alt=""
                class="lazy smoke2">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/smoke3.png" alt=""
                class="lazy smoke3">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/smoke4.png" alt=""
                class="lazy smoke4">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/cloud1.png" alt=""
                class="lazy cloud1">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/cloud2.png" alt=""
                class="lazy cloud2">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/cloud3.png" alt=""
                class="lazy cloud3">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/cloud4.png" alt=""
                class="lazy cloud4">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/bird1.png" alt="" class="lazy bird1">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/bird2.png" alt="" class="lazy bird2">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/bird3.png" alt="" class="lazy bird3">
            <img src="./image/universe/loading.gif" data-src="./image//agriculture/bird4.png" alt="" class="lazy bird4">
            <img src="./image/universe/loading.gif" data-src="./image/agriculture/farmer.png" alt=""
                class="lazy farmer">
            <img src="./image/universe/loading.gif" data-src="./image/agriculture/nongye_bg_before.png" alt=""
                class="lazy nongye_down">
            <div class="EVO_rule">
                <div class="big_board">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/big_board.png" alt=""
                        class="lazy big_board_bg">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/handle.png" alt=""
                        class="lazy handle">
                    <span>Free to earn</span>
                    <ul>
                        <li>Adventure</li>
                        <li>Jobs</li>
                        <li>Evolution</li>
                        <li>Patents</li>
                    </ul>
                </div>
                <img src="./image/universe/loading.gif" data-src="./image/agriculture/arrow1.png" alt=""
                    class="lazy arrow1">
                <img src="./image/universe/loading.gif" data-src="./image/agriculture/arrow1.png" alt=""
                    class="lazy arrow2">
                <img src="./image/universe/loading.gif" data-src="./image/agriculture/arrow1.png" alt=""
                    class="lazy arrow3">
                <img src="./image/universe/loading.gif" data-src="./image/agriculture/arrow1.png" alt=""
                    class="lazy arrow4">
                <div class="EVO">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/luminescence.png" alt=""
                        class="lazy luminescence">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/EVO_token.png" alt=""
                        class="lazy EVO_token">
                </div>
                <ul class="small_board">
                    <li class="small_board1">
                        <img src="./image/universe/loading.gif" data-src="./image/agriculture/sell.png" alt=""
                            class="lazy">
                        <span>Exchange</span>
                    </li>
                    <li class="small_board2">
                        <img src="./image/universe/loading.gif" data-src="./image/agriculture/transaction.png" alt=""
                            class="lazy">
                        <span>Trade</span>
                    </li>
                    <li class="small_board3">
                        <img src="./image/universe/loading.gif" data-src="./image/agriculture/culture.png" alt=""
                            class="lazy">
                        <span>Cultivation</span>
                    </li>
                </ul>
            </div>
            <div class="phone_EVO_rule">
                <div class="big_board">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/big_board.png" alt=""
                        class="lazy big_board_bg">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/handle.png" alt=""
                        class="lazy handle">
                    <span>Free to earn</span>
                    <ul>
                        <li>Adventure</li>
                        <li>Jobs</li>
                        <li>Evolution</li>
                        <li>Patents</li>
                    </ul>
                </div>
                <img src="./image/universe/loading.gif" data-src="./image/agriculture/phone_arrow1.png" alt=""
                    class="lazy phone_arrow1">
                <div class="arrowGroup">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/arrow1.png" alt=""
                        class="lazy phone_arrow2">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/arrow1.png" alt=""
                        class="lazy phone_arrow3">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/arrow1.png" alt=""
                        class="lazy phone_arrow4">
                </div>
                <div class="EVO">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/luminescence.png" alt=""
                        class="lazy luminescence">
                    <img src="./image/universe/loading.gif" data-src="./image/agriculture/EVO_token.png" alt=""
                        class="lazy EVO_token">
                </div>
                <ul class="small_board small_board_phone">
                    <li class="small_board1">
                        <img src="./image/universe/loading.gif" data-src="./image/agriculture/sell.png" alt=""
                            class="lazy">
                        <span>Exchange</span>
                    </li>
                    <li class="small_board2">
                        <img src="./image/universe/loading.gif" data-src="./image/agriculture/transaction.png" alt=""
                            class="lazy">
                        <span>Trade</span>
                    </li>
                    <li class="small_board3">
                        <img src="./image/universe/loading.gif" data-src="./image/agriculture/culture.png" alt=""
                            class="lazy">
                        <span>Cultivation</span>
                    </li>
                </ul>
            </div>
        </div>
        <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/shiqi_phone_bg.png" alt=""
            class="lazy shiqi_phone_bg">
        <div class="shiqi position-re">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/shiqi_bg.jpg" alt=""
                class="lazy bg">

            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/fox.png" alt="" class="lazy fox">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/fox_shelter.png" alt=""
                class="lazy fox_shelter">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/gun1.png" alt="" class="lazy gun1">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/gun2.png" alt="" class="lazy gun2">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/leaf1.png" alt=""
                class="lazy leaf1">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/leaf2.png" alt=""
                class="lazy leaf2">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/leaf3.png" alt=""
                class="lazy leaf3">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/leaf1.png" alt=""
                class="lazy leaf4">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/leaf3.png" alt=""
                class="lazy leaf5">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton1.png" alt=""
                class="lazy skeleton1">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton2.png" alt=""
                class="lazy skeleton2">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton3.png" alt=""
                class="lazy skeleton3">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton7.png" alt=""
                class="lazy skeleton7">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton6.png" alt=""
                class="lazy skeleton6">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton4.png" alt=""
                class="lazy skeleton4">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton5.png" alt=""
                class="lazy skeleton5">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/skeleton8.png" alt=""
                class="lazy skeleton8">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/slate_light.png" alt=""
                class="lazy slate_light">
            <div class="slate">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/slate.png" alt=""
                    class="lazy slate_bg">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/history.png" alt=""
                    class="lazy history">
                <div class="stela_text">
                    <p>Long, long ago, on a planet, the life form CaCha was born, using bones as a genetic carrier.
                        ChaCha share a common soul with human beings, a relationship between the surface and the inside,
                        transforming each other and living.</p>
                    <p>When they were still hunting in groups, the elders of the tribe discovered the black square
                        tablet left by the higher dimensional beings, a perfect cube with a flawless surface. The
                        worship of the monolith gave the bones the wisdom to learn to make tools and use the stone
                        spears and axes they made to dominate the area as apex predators.</p>
                    <p>They began to multiply and spread, making large ships to leave the deserted islands and look for
                        new continents. They divided the entire planet into nine continents, each with different
                        resources, and early maritime trade began to take shape.</p>
                    <p>Thousands of years passed, and the CaCha gazed up into the night sky. The beauty of space makes
                        them yearn for it, never able to stop their thirst for the unknown.</p>
                    <p>With their advance in technology, they try to use the universal rules of the universe to
                        transform nature and try to leave their home planet. After countless failures, they finally get
                        rid of the constraints of gravity and gaze upon their homeworld from space.</p>
                    <p>In the near future, exploring their galaxy becomes the goal of the ChaCha, and by mastering star
                        energy, the era of interstellar colonization begins.</p>
                    <p>The CaCha find a stargate at the galactic center, where ancient runes and a sense of technology
                        beyond civilization strike fear into them. Just like the tribespeople who touched the monolith
                        for the first time. The excitement and yearning for the unknown make the discoverers brave
                        enough to walk in.</p>
                </div>
            </div>

            <div class="slate_phone">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/slate_phone.png" alt=""
                    class="lazy slate_bg">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/history.png" alt=""
                    class="lazy history">
                <div class="stela_text">
                    <p>Long, long ago, on a planet, the life form CaCha was born, using bones as a genetic carrier.
                        ChaCha share a common soul with human beings, a relationship between the surface and the inside,
                        transforming each other and living.</p>
                    <p>When they were still hunting in groups, the elders of the tribe discovered the black square
                        tablet left by the higher dimensional beings, a perfect cube with a flawless surface. The
                        worship of the monolith gave the bones the wisdom to learn to make tools and use the stone
                        spears and axes they made to dominate the area as apex predators.</p>
                    <p>They began to multiply and spread, making large ships to leave the deserted islands and look for
                        new continents. They divided the entire planet into nine continents, each with different
                        resources, and early maritime trade began to take shape.</p>
                    <p>Thousands of years passed, and the CaCha gazed up into the night sky. The beauty of space makes
                        them yearn for it, never able to stop their thirst for the unknown.</p>
                    <p>With their advance in technology, they try to use the universal rules of the universe to
                        transform nature and try to leave their home planet. After countless failures, they finally get
                        rid of the constraints of gravity and gaze upon their homeworld from space.</p>
                    <p>In the near future, exploring their galaxy becomes the goal of the ChaCha, and by mastering star
                        energy, the era of interstellar colonization begins.</p>
                    <p>The CaCha find a stargate at the galactic center, where ancient runes and a sense of technology
                        beyond civilization strike fear into them. Just like the tribespeople who touched the monolith
                        for the first time. The excitement and yearning for the unknown make the discoverers brave
                        enough to walk in.</p>
                </div>
            </div>
        </div>
        <div class="shiqi_foot position-re">
            <!-- <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/shiqi_end_bg.png" alt=""
                class="lazy bg"> -->
            <!-- <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/PARTNERS.png" alt=""
                class="lazy PARTNERS">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/network.png" alt=""
                class="lazy network">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/maker.png" alt=""
                class="lazy maker">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/aave.png" alt=""
                class="lazy aave">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/ubisoft.png" alt=""
                class="lazy ubisoft">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/binance.png" alt=""
                class="lazy binance">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/samsung.png" alt=""
                class="lazy samsung"> -->
            <!-- <ul class="foot_list ul1">
                <li>Home</li>
                <li>Game</li>
            </ul>
            <ul class="foot_list ul2">
                <li onclick="goToEvo()">EVO</li>
                <li>Marketplace</li>
            </ul>
            <ul class="foot_list ul3">
                <li>Whitepaper</li>
            </ul> -->

            <div class="footInfo">
                <!-- <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/LOGO.png" alt=""
                    class="lazy logo"> -->
                <div class="foot_right">
                    <ul>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon1.png"
                                alt="" class="lazy icon1" onclick="footPath(1)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon2.png"
                                alt="" class="lazy icon2" onclick="footPath(2)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon3.png"
                                alt="" class="lazy icon3" onclick="footPath(3)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon4.png"
                                alt="" class="lazy icon4" onclick="footPath(4)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon5.png"
                                alt="" class="lazy icon5" onclick="footPath(5)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon6.png"
                                alt="" class="lazy icon6" onclick="footPath(6)"></li>
                    </ul>
                    <span class="email">Email:support@evosurfers.com</span>
                    <span class="Copyight">Copyright ©2022 Evo Surfers</span>
                </div>
            </div>
        </div>
        <div class=" phone_foot">
            <img src="./image/universe/loading.gif" data-src="./image/stoneArtifact/shiqi_end_bg.png" alt=""
                class="lazy bg" style="height:4.5rem; margin-top: -0.3rem;">
            <!-- <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/PARTNERS.png" alt=""
                class="lazy PARTNERS">
            <div class="support_group">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/network.png" alt=""
                    class="lazy support_network">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/ubisoft.png" alt=""
                    class="lazy support_ubisoft">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/maker.png" alt=""
                    class="lazy support_maker">

            </div>
            <div class="support_group2">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/aave.png" alt=""
                    class="lazy support_aave">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/binance.png" alt=""
                    class="lazy support_binance">
                <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/samsung.png" alt=""
                    class="lazy support_samsung">
            </div> -->
            <!-- <div class="support_list_group">
                <ul class="support_lis_1">
                    <li>Home</li>
                    <li>Game</li>
                </ul>
                <ul class="support_lis_2">
                    <li onclick="goToEvo()">EVO</li>
                    <li>Marketplace</li>
                </ul>
                <ul class="support_lis_3">
                    <li>Whitepaper</li>
                </ul>
            </div> -->

            <div class="footInfo">
                <!-- <img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/LOGO.png" alt=""
                    class="lazy logo"> -->
                <div class="foot_right">
                    <ul>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon1.png"
                                alt="" class="lazy icon1" onclick="footPath(1)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon2.png"
                                alt="" class="lazy icon2" onclick="footPath(2)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon3.png"
                                alt="" class="lazy icon3" onclick="footPath(3)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon4.png"
                                alt="" class="lazy icon4" onclick="footPath(4)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon5.png"
                                alt="" class="lazy icon5" onclick="footPath(5)"></li>
                        <li><img src="./image/universe/loading.gif" data-src="./image/stoneArtifactFoot/icon6.png"
                                alt="" class="lazy icon6" onclick="footPath(6)"></li>
                    </ul>
                    <span class="email">Email:support@evosurfers.com</span>
                    <span class="Copyight">Copyright ©2022 Evo Surfers</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/jquery.lazy.min.js"></script>
<script src="./js/index.js"></script>

</html>